<template>
  <div class="home">
    <nav-bar class="home-nav">
      <div slot="left"></div>
      <div slot="middle">购物街</div>
      <div slot="right"></div>
    </nav-bar>

    <tab-control
      class="tab-control-fixed"
      v-show="show2TabControl"
      :title_list="titleList"
      @changeGoodsType="getGoodsType"
      ref="refTabControl2"
    />

    <scroll
      class="wrapper"
      ref="refScroll"
      :probe-type="3"
      :pull-up-load="true"
      @scroll="getScrollPosition"
      @pullingUp="catchPullingUpEmit"
    >
      <home-swiper
        :banner_list="banner.list"
        @img-load-finished="getScrollValue"
      />
      <home-recommend-view
        :recommend_list="recommend.list"
        @img-load-finished="getScrollValue"
      />
      <home-feature-view @img-load-finished="getScrollValue" />

      <tab-control
        :title_list="titleList"
        @changeGoodsType="getGoodsType"
        ref="refTabControl"
      />
      <goods-list :goods_list="currentGoodsList" />
    </scroll>

    <back-top v-show="showBackTop" @click.native="backToTop" />
  </div>
</template>

<script>
import { imgLoadMoutedMixins, backTopMixins } from 'assets/js/mixins'

import NavBar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/scroll/Scroll'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'

import HomeSwiper from './comps/HomeSwiper'
import HomeRecommendView from './comps/HomeRecommendView'
import HomeFeatureView from './comps/HomeFeatureView'

import { getHomeDataReq, getHomeGoodsDataReq } from 'network/home'

export default {
  components: {
    NavBar,
    Scroll,
    TabControl,
    GoodsList,

    HomeSwiper,
    HomeRecommendView,
    HomeFeatureView,
  },
  data() {
    return {
      banner: {
        list: [],
      },
      dKeyword: null,
      keywords: null,
      recommend: {
        list: [],
      },
      goods: {
        poplist: {
          list: [],
        },
        newslist: {
          list: [],
        },
        selectlist: {
          list: [],
        },
      },
      goodsType: 'poplist',
      titleList: ['流行', '新款', '精选'],
      show2TabControl: false,
      tabControlOffsetNum: 200,
      currentScrollNum: 0,
    }
  },
  computed: {
    currentGoodsList() {
      if (!this.goods[this.goodsType].list) {
        return []
      }
      return this.goods[this.goodsType].list
    },
  },
  // 混入的使用
  // 定义一个对象，包含某个vue组件下的代码（可以是 data，可以是各个周期函数），然后用这个导入，那么这个周期对象则在不同的引入它的对象中生效。对应周期执行相应的代码
  mixins: [imgLoadMoutedMixins,backTopMixins],
  created() {
    this.getHomeData()
    this.getHomeGoodsData('poplist')
    this.getHomeGoodsData('newslist')
    this.getHomeGoodsData('selectlist')
  },
  mounted() {
    // 这里是监听 图片加载的总线事件完成，然后刷新滚动插件的实时高度
    // console.log(this.$refs.refScroll);
    // this.$bus.$on(
    //   'itemImageLoad',
    //   debounce(() => {
    //     if (this.$refs.refScroll) {
    //       this.$refs.refScroll.scrollRefresh()
    //     }
    //   }, 500)
    // )
  },
  // 以下 activated,deactivated 是为了处理当切换回 home 页的时候，滑动位置未在离开时所在的位置，但是取消后暂时没啥影响
  activated() {
    // this.$refs.refScroll.backToTop(0, this.currentScrollNum, 1000)
    // this.$refs.refScroll.scrollRefresh()
  },
  deactivated() {
    // this.currentScrollNum = this.$refs.refScroll.getScrollNumForY()
  },
  methods: {
    async getHomeData() {
      const res = await getHomeDataReq()
      // console.log(res)
      this.banner = res.data.banner
      this.dKeyword = res.data.dKeyword
      this.keywords = res.data.keywords
      this.recommend = res.data.recommend
    },

    // 获取 tab 切换页数据，type 是分类参数
    async getHomeGoodsData(type) {
      const { data } = await getHomeGoodsDataReq()

      this.goods[type].list.push(...data[type].list)

      // 当数据加载完后，将scroll的下拉状态更新一下
      this.$refs.refScroll.scrollFinishPullUp()
    },
    // 监听tab组件事件，改变goodstype
    getGoodsType(e) {
      if (e === 0) {
        this.goodsType = 'poplist'
      } else if (e === 1) {
        this.goodsType = 'newslist'
      } else {
        this.goodsType = 'selectlist'
      }

      // 同步两个不同的 tabcontrol 的 currentindex
      // 在不同 store 的情况下，简便用法，通过设置 ref，获得这两个组件的引用，来改变他们的 currentIndex
      this.$refs.refTabControl.currentIndex = e
      this.$refs.refTabControl2.currentIndex = e
    },
    // 回到顶部
    backToTop() {
      // console.log(this.$refs.refScroll)
      // 把返回头部的方法定义在子组件，home 组件来调用
      // 属性分别是，返回到的 x轴 y轴的位置，经过多少毫秒到顶部
      this.$refs.refScroll.backToTop(0, 0)
    },

    getScrollPosition(position) {
      
      this.toggleBackTopFlag(position)

      // 当移动距离 大于 tabcontrol 组件离父组件高度，显示
      if (-position.y >= this.tabControlOffsetNum) {
        this.show2TabControl = true
      } else {
        this.show2TabControl = false
      }
    },
    catchPullingUpEmit() {
      this.getHomeGoodsData(this.goodsType)
    },
    getScrollValue() {
      this.tabControlOffsetNum = this.$refs.refTabControl.$el.offsetTop
    },
  },
}
</script>

<style lang="less" scoped>
.home {
  padding: 0 0 49px 0;

  .wrapper {
    height: calc(100vh - 93px);
    overflow: hidden;
    position: relative;
  }

  .home-nav {
    background-color: @base-color;
    color: #ffffff;
  }
  .tab-control-fixed {
    // css 属性实现 滑动到某一位置变成fix固定，比较有用
    // 在使用这个 better-scroll 组件后无效，transform 里面用 fixed 无效
    // position: sticky;
    // top: 44px;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 1;
  }
}
</style>
